<template>
  <div>
    <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-position="right" label-width="130px">
      <el-form-item label="APPID:" prop="accountId">
        <el-input v-model.trim="temp.accountId" placeholder="请输入" clearable maxlength="50" />
        <el-tooltip placement="right">
          <div slot="content">APP的编号，应用在API开放平台注册时生成</div>
          <i class="el-icon-question" />
        </el-tooltip>
      </el-form-item>
      <el-form-item label="商户号（线上）:" prop="merId">
        <el-input v-model.trim="temp.merId" placeholder="请输入" clearable maxlength="50" />
        <el-tooltip placement="right">
          <div slot="content">线上支付商户号</div>
          <i class="el-icon-question" />
        </el-tooltip>
      </el-form-item>
      <el-form-item label="商户号（线下）" prop="merIdOffline">
        <el-input v-model.trim="temp.merIdOffline" placeholder="请输入" clearable maxlength="50" />
        <el-tooltip placement="right">
          <div slot="content">线下支付商户号</div>
          <i class="el-icon-question" />
        </el-tooltip>
      </el-form-item>
      <el-form-item label="第三方应用ID:" prop="subAmountId">
        <el-input v-model.trim="temp.subAmountId" placeholder="请输入" clearable maxlength="50" />
        <el-tooltip placement="right">
          <div slot="content">商户在微信公众号内接入时必送，上送微信分配的公众账号ID；商户通过支付宝生活号接入时必送，上送支付宝分配的应用ID</div>
          <i class="el-icon-question" />
        </el-tooltip>
      </el-form-item>
      <el-form-item label="加密秘钥:" prop="accountKey">
        <el-input v-model.trim="temp.accountKey" type="password" placeholder="请输入" clearable maxlength="50" />
      </el-form-item>
      <el-form-item label="网关公钥:" prop="publicKey">
        <el-input v-model.trim="temp.publicKey" type="password" placeholder="请输入" clearable maxlength="50" />
      </el-form-item>
      <el-form-item label="应用私钥:" prop="privateKey">
        <el-input v-model.trim="temp.privateKey" type="password" placeholder="请输入" clearable maxlength="50" />
      </el-form-item>
      <el-form-item label="异步回调地址:" prop="notifyUrl">
        <el-input v-model.trim="temp.notifyUrl" placeholder="请输入" clearable maxlength="200" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="$loadingPlugin.submit" @click="save">保存配置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { selectBankPayAccount, saveBankPayAccount } from '@/api'
  import { mapGetters } from 'vuex'

  export default {
    name: 'IcbcTab',
    data() {
      return {
        appIdList: [],
        defaultData: {},
        temp: {
          accountId: '',
          merId: '',
          merIdOffline: '',
          subAmountId: '',
          accountKey: '',
          publicKey: '',
          privateKey: '',
          notifyUrl: ''
        },
        rules: {
          accountId: [{ required: true, message: '请输入应用appId', trigger: 'change' }],
          merId: [{ required: true, message: '请输入线上商户号', trigger: 'change' }],
          merIdOffline: [{ required: true, message: '请输入线下商户号', trigger: 'change' }],
          subAmountId: [{ required: true, message: '请输入应用appId', trigger: 'change' }],
          accountKey: [{ required: true, message: '请输入加密秘钥', trigger: 'change' }],
          publicKey: [{ required: true, message: '请输入网关公钥', trigger: 'change' }],
          privateKey: [{ required: true, message: '请输入应用私钥', trigger: 'change' }],
          notifyUrl: [{ required: true, message: '请输入异步回调地址', trigger: 'change' }]
        }
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    async created() {
      await Promise.all([this.getDefaultData()])
    },
    methods: {
      async getDefaultData() {
        const res = await selectBankPayAccount({ corpCode: this.userInfo.corpCode, bankId: 4 })
        this.temp = Object.assign(this.temp, res.data)
        this.defaultData = res.data
      },
      save() {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          const params = {
            ...this.temp,
            bankId: 4
          }
          this.submit(params)
        })
      },
      async submit(params) {
        await saveBankPayAccount(params)
        this.$notify({
          title: '提示',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
      }
    }
  }
</script>

<style scoped>
  .form-item {
    width: 500px;
  }
  .el-input {
    width: 350px;
  }
</style>
